var t_width = $("#plogw").attr("width");

var cell_data = [
  ["项目名称1", 111, 2, 3, 4, 6, 7, 8, 9, 10, 11, 12, 13, 14],
  ["项目名称2", 1, 2, 3, 4, 6, 7, 8, 9, 10, 11, 12, 13, 14],
  ["项目名称3", 1, 2, 3, 4, 6, 7, 8, 9, 10, 11, 12, 13, 14],
  ["项目名称4", 1, 2, 322.5, 4, 6, 7, 8, 9, 10, 11, 12, 13, 14],
  ["项目名称5", 1, 2, 3, 4, 6, 7, 8, 9, 10, 11, 12, 13, 14],
  ["项目名称6", 1, 2, 3, 4, 6, 7, 8, 9, 10, 11, 12, 13, 14],
  ["项目名称7", 1, 2, 3, 4, 6, 7, 8, 9, 10, 11, 12, 13, 14],
  ["项目名称8", 1, 2, 3, 4, 6, 7, 8, 9, 10, 11, 12, 13, 14],
  ["项目名称9", 1, 2, 3, 4, 6, 7, 8, 9, 10, 11, 12, 13, 14],
  ["项目名称10", 1, 2, 3, 4, 6, 7, 8, 9, 10, 11, 12, 13, 14],
  ["项目名称11", 111, 2, 3, 4, 6, 7, 8, 9, 10, 11, 12, 13, 14],
  ["项目名称12", 1, 2, 3, 4, 6, 7, 8, 9, 10, 11, 12, 13, 14],
  ["项目名称13", 1, 2, 3, 4, 6, 7, 8, 9, 10, 11, 12, 13, 14],
  ["项目名称14", 1, 2, 322.5, 4, 6, 7, 8, 9, 10, 11, 12, 13, 14],
  ["项目名称15", 1, 2, 3, 4, 6, 7, 8, 9, 10, 11, 12, 13, 14],
  ["项目名称16", 1, 2, 3, 4, 6, 7, 8, 9, 10, 11, 12, 13, 14],
  ["项目名称17", 1, 2, 3, 4, 6, 7, 8, 9, 10, 11, 12, 13, 14],
  ["项目名称18", 1, 2, 3, 4, 6, 7, 8, 9, 10, 11, 12, 13, 14],
  ["项目名称19", 1, 2, 3, 4, 6, 7, 8, 9, 10, 11, 12, 13, 14],
  ["项目名称20", 1, 2, 3, 4, 6, 7, 8, 9, 10, 11, 12, 13, 14]
];

cell_data.unshift(["", "01月", "02月", "03月", "04月", "05月", "06月", "07月", "08月", "09月", "10月", "11月", "12月", "合计"])

var firstRowRenderer = function (instance, td, row, col, prop, value, cellProperties) {
  Handsontable.renderers.TextRenderer.apply(this, arguments);
  $(td).css("color", "#797979");
  $(td).css("background-color", "#eee");
};

var firstColRenderer = function (instance, td, row, col, prop, value, cellProperties) {
  Handsontable.renderers.TextRenderer.apply(this, arguments);
  $(td).css("width", "200px");
  $(td).css("color", "#797979");
  $(td).css("background-color", "#eee");
};

var dhoursColRenderer = function (instance, td, row, col, prop, value, cellProperties) {
  Handsontable.renderers.TextRenderer.apply(this, arguments);
  if (value > 199) {
    $(td).css("color", "#FF6C60");
  }
};

var container = document.getElementById('yearlogtable');
hot = new Handsontable(container, {
  data: cell_data, //导入数据
  rowHeaders: false,
  colHeaders: false,
  fixedRowsTop: 1,
  fixedColumnsLeft: 1,
  className: "htCenter htMiddle",
  width: t_width, //表宽 多余自动显示滚动条
  height: 400,//表高
  language: 'zh-CN',
  rowHeights: 40,
  // colWidths: 75,
  cells: function (row, col, prop) {//单元格渲染
    var cellProperties = {};
    if (row === 0) {
      cellProperties.renderer = firstRowRenderer;//调用首行渲染方法 
    }
    if (col === 0) {
      cellProperties.renderer = firstColRenderer;//调用首列渲染方法 
    }
    if (row < cell_data.length) {
      cellProperties.readOnly = true;
    }
    if (row !== 0 && col !== 0) {
      this.renderer = dhoursColRenderer;
    }
    return cellProperties;
  },
});

//单击事件的回调函数
function callBack(event, coords, td) {
  var row = coords.row;
  var col = coords.col;
  var hours = hot.getCell(row, col, true);//取出点击内容是否为空

  var title = document.getElementById('pTitle');
  var box = document.getElementById('pbox');
  var ydbox = document.getElementById('ydbox');
  var ypbox = document.getElementById('ypbox');

  if ($(hours).html() === "" || $(hours).html() === undefined || $(hours).html() === null) {
    box.style.display = 'none';
    return;
  } else {
    if (row != 0 && col != 0) {
      var name = hot.getCell(row, 0, true);//取出姓名
      var time = hot.getCell(0, col, true);//取出日期
      var user = $(name).html();
      var day = $(time).html();

      var dateTime = $("#year").val() + "年" + day.substring(0, day.length - 1);

      if (day.substring(0, day.length - 1) === '合') {
        box.style.display = 'none';
        return;
      } else {
        console.log('根据' + user, dateTime + '查询当前日该员工的记录')
        ypbox.style.display = "none";
        box.style.display = 'block';
        title.innerHTML = user + '  ' + dateTime + '月的所有日度工时明细';
        ydbox.style.display = 'block';
        onProTable('ydaylogtable')
      }
    } if (row === 0) {
      var time = hot.getCell(0, col, true);//取出日期
      var day = $(time).html();
      var dateTime = $("#year").val() + "-" + day.substring(0, day.length - 1);

      if (day.substring(0, day.length - 1) === '合') {
        box.style.display = 'none';
        return;
      } else {
        box.style.display = 'none';
        return;
        // console.log('根据' + dateTime + '查询当前月所有项目的记录')
      }
    } if (col === 0) {
      var name = hot.getCell(row, 0, true);//取出姓名
      var time = hot.getCell(0, col, true);//取出日期
      var user = $(name).html();
      var day = $(time).html();

      var dateTime = $("#year").val();

      console.log('根据' + user, dateTime + '查询当前项目该年份所有记录')
      ydbox.style.display = 'none';
      box.style.display = 'block';
      title.innerHTML = user + '历年所有月度工时明细'
      ypbox.style.display = 'block';
      onProTable('yprodlogtable')
    }
  }
}

//单击事件
Handsontable.hooks.add('afterOnCellMouseDown', callBack, hot);

// 点击分页回调值
function getNumber(number) {
  console.log('页码' + number)
}

// 初始化分页  id绑定声明   (总数量,初始页数,分页点击回调函数）
$("#page").initPage(71, 1, getNumber);


function onProTable(boxId) {
  var ctainer = document.getElementById(boxId);

  if(boxId === "ydaylogtable"){
    var ondata = [
      ["张三(900356)", 1, 2, 3, 4, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 0, 0, 0, 0, 2, 1, 1, 2],
      ["李四(900551)", 1, 2, 3, 4, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 0, 0, 0, 0, 2, 1, 1],
      ["王五(HX00021)", 30, 15, 12, 13],
      ["张三(HX00021)", 1, 2, 3, 4, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 0, 0, 0, 0, 2, 1, 1, 2],
      ["李四(HX00021)", 1, 2, 3, 4, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 0, 0, 0, 0, 2, 1, 1],
      ["陈六六六(HX00078)", 30, 15, 12, 13],
      ["张三三三(900365)", 1, 2, 3, 4, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 0, 0, 0, 0, 2, 1, 1, 2],
      ["李四(900365)", 1, 2, 3, 4, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 0, 0, 0, 0, 2, 1, 1],
      ["王五(900365)", 30, 15, 12, 13],
      ["张三(900365)", 1, 2, 3, 4, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 0, 0, 0, 0, 2, 1, 1, 2],
      ["李四(900365)", 1, 2, 3, 4, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 0, 0, 0, 0, 2, 1, 1],
      ["王五(900365)", 30, 15, 12, 13],
      ["张三(900365)", 1, 2, 3, 4, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 0, 0, 0, 0, 2, 1, 1, 2],
      ["李四(900365)", 1, 2, 3, 4, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 0, 0, 0, 0, 2, 1, 1],
      ["王五(900365)", 30, 15, 12, 13],
    ];
    
    ondata.unshift(["", "01日", "02日", "03日", "04日", "05日", "06日", "07日", "08日", "09日", "10日",
      "11日", "12日", "13日", "14日", "15日", "16日", "17日", "18日", "19日", "20日",
      "21日", "22日", "23日", "24日", "25日", "26日", "27日", "28日", "29日", "30日", "31日", "合计"])
  }

  if(boxId === "yprodlogtable") {
    var ondata = [
      ["2019", 111, 2, 3, 4, 6, 7, 8, 9, 10, 11, 12, 13, 14],
      ["2018", 1, 2, 3, 4, 6, 7, 8, 9, 10, 11, 12, 13, 14],
      ["2017", 1, 2, 3, 4, 6, 7, 8, 9, 10, 11, 12, 13, 14],
      ["2016", 1, 2, 322.5, 4, 6, 7, 8, 9, 10, 11, 12, 13, 14],
    ];
    
    ondata.unshift(["", "01月", "02月", "03月", "04月", "05月", "06月", "07月", "08月", "09月", "10月", "11月", "12月", "合计"])
    
  }

  var onTable = new Handsontable(ctainer, {
    data: ondata, //导入数据
    rowHeaders: false,
    colHeaders: false,
    fixedRowsTop: 1,
    fixedColumnsLeft: 1,
    className: "htCenter htMiddle",
    width: t_width, //表宽 多余自动显示滚动条
    height: 400,//表高
    language: 'zh-CN',
    rowHeights: 40,
    // colWidths: 75,
    cells: function (row, col, prop) {//单元格渲染
      var cellProperties = {};
      if (row === 0) {
        cellProperties.renderer = firstRowRenderer;//调用首行渲染方法 
      }
      if (col === 0) {
        cellProperties.renderer = firstColRenderer;//调用首列渲染方法 
      }
      if (row < ondata.length) {
        cellProperties.readOnly = true;
      }
      if (row !== 0 && col !== 0) {
        this.renderer = dhoursColRenderer;
      }
      return cellProperties;
    },
  });

  return onTable;
}